<div id="app">
    <el-card class="box-card">

        <el-form style="margin-top: 20px;" :inline="true">

            <el-form-item label="出入库员：" label-width="100px" :inline="true">
                <div style="display: flex;">
                    <el-input v-model="search_form.discrepancy" placeholder="请输入出入库员" ></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="search_get_list" ></el-button>
                </div>
            </el-form-item>
            <el-form-item label="下单人：" label-width="100px" :inline="true">
                <div style="display: flex;">
                    <el-input v-model="search_form.order_head" placeholder="请输入下单人" ></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="search_get_list" ></el-button>
                </div>
            </el-form-item>
        </el-form>

        <el-button :type="type_=='all'?'primary':''" size="small" @click="changeList('all')">全部</el-button>
        <el-button :type="type_=='rouku'?'primary':''" size="small" @click="changeList('rouku')">入库明细</el-button>
        <el-button :type="type_=='chuku'?'primary':''" size="small" @click="changeList('chuku')">出库明细</el-button>
        <div style="height: 30px;"></div>
        <el-table v-if="dataArr.length>0"
                  :data="dataArr"
                  border
                  style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="discrepancy"
                    label="出入库员"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="order_head"
                    label="下单人"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="good_name"
                    label="商品名称"
            >
            </el-table-column>

            <el-table-column
                    prop="good_type_name"
                    label="商品分类"
            >

            </el-table-column>
            <el-table-column
                    prop="receipt_issue_type"
                    label="出入库类型"
            >
                <template slot-scope="{row}">
                    <span v-if="row.receipt_issue_type==1">采购入库</span>
                    <span v-else-if="row.receipt_issue_type==2">作废入库</span>
                    <span v-else-if="row.receipt_issue_type==3">销售出库</span>
                    <span v-else-if="row.receipt_issue_type==4">盘盈入库</span>
                    <span v-else-if="row.receipt_issue_type==5">盘亏出库</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="receipt_issue_num"
                    label="出入库数量"
            >
                <template slot-scope="{row}">
                    <span style="color: rgb(36, 179, 100);" v-if="row.receipt_issue_type==1 || row.receipt_issue_type==2||row.receipt_issue_type==4">+{{row.receipt_issue_num}}</span>
                    <span style="color: red" v-else-if="row.receipt_issue_type==3 || row.receipt_issue_type==5">-{{row.receipt_issue_num}}</span>
                </template>

            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="出入库时间"
            >
            </el-table-column>

            <el-table-column
                    prop="remarks"
                    label="备注"
            >
            </el-table-column>

            <el-table-column label="操作" width="200">
                <template slot-scope="{row}">
                    <el-button type="text" size="mini" @click="detail_show(row)">详情</el-button>
<!--                    <el-button type="text" size="mini" @click="edit_show(row)">编辑</el-button>-->
<!--                    <el-button type="text" size="mini" @click="notes_show(row)">备注</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </el-card>
    <el-dialog
            :title="detail_obj.receipt_issue_type==2?'入库明细详情':active_int===1?'入库明细详情':'出库明细详情'"
            :visible.sync="dialogVisible"
            width="85%"
    >
<!--入库-->
        <div v-if="active_int===1">
            <div style="border: 1px solid rgba(232, 232, 232, 1);margin-bottom: 20px;" v-if="detail_obj.goods_warehousing_item">
                <div class="border">
                    <fieldset class="layui-elem-field layui-field-title" >
                        <legend style="font-weight: bold;font-size: 16px;">入库单信息</legend>
                    </fieldset>
                    <!--                    <div class="tit"></div>-->
                    <table style="width: 100%;line-height: 2;margin: 20px" class="table">
                        <tr>

                            <td>入库人：{{detail_obj.discrepancy}}</td>
                            <td>入库时间：{{detail_obj.create_time}}</td>
                        </tr>
                    </table>

                    <fieldset class="layui-elem-field layui-field-title" >
                        <legend style="font-weight: bold;font-size: 16px;">商品信息</legend>
                    </fieldset>
                    <el-table :data="detail_obj.goods_warehousing_item "
                              border>
                        <el-table-column label="商品" prop="good_name" width="200"></el-table-column>
                        <el-table-column label="数量" prop="num" width="110"></el-table-column>
                    </el-table>
                </div>
            </div>


            <div style="border: 1px solid rgba(232, 232, 232, 1);margin-bottom: 20px;" v-if="detail_obj.checklist_item">
                <div class="border">
                    <fieldset class="layui-elem-field layui-field-title" >
                        <legend style="font-weight: bold;font-size: 16px;">盘点单信息</legend>
                    </fieldset>
                    <!--                    <div class="tit"></div>-->
                    <table style="width: 100%;line-height: 2;margin: 20px" class="table">
                        <tr>
                            <td>盘点单号：{{detail_obj.check_no}}</td>
                            <td>盘点单名称：{{detail_obj.check_name}}</td>
                            <td>盘点人：{{detail_obj.employee_name}}</td>
                        </tr>
                        <tr>
                            <td>盘点状态：
                                <span v-if="detail_obj.status==1">待盘点</span>
                                <span v-else-if="detail_obj.status==2">盘点中</span>
                                <span v-else-if="detail_obj.status==3">盘点完成</span>
                            </td>
                            <td>盘点时间：{{detail_obj.create_time}}</td>
                        </tr>
                    </table>

                    <fieldset class="layui-elem-field layui-field-title" >
                        <legend style="font-weight: bold;font-size: 16px;">商品信息</legend>
                    </fieldset>
                    <el-table :data="detail_obj.checklist_item"
                              border>
                        <el-table-column label="序号" prop="id" width="110"></el-table-column>
                        <!--                        <el-table-column label="商品编号" prop="gid" width="110"></el-table-column>-->
                        <el-table-column label="商品" prop="good_name"></el-table-column>
                        <!--                        <el-table-column label="规格" prop="physical_inventory" width="110"></el-table-column>-->
                        <el-table-column label="商品分类" prop="good_type_name" width="110"></el-table-column>
                        <el-table-column label="库存" prop="stock" width="110"></el-table-column>
                        <el-table-column label="实际库存" prop="physical_inventory" width="110"></el-table-column>
                        <el-table-column label="备注" prop="remarks" width="110"></el-table-column>

                    </el-table>
                </div>
            </div>
        </div>
<!--出库-->
        <div v-if="active_int===2">
            <div class="border">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend style="font-weight: bold;font-size: 16px;">收货信息</legend>
                </fieldset>
                <table style="width: 100%;line-height: 1.8;" class="table">
                    <tr>
                        <td>收货：{{detail_obj.consignee}}</td>
                        <td>联系电话：{{detail_obj.contact_phone}}</td>
                        <td>收货地址：{{detail_obj.provinces}}{{detail_obj.city}}{{detail_obj.area}}{{detail_obj.address}}</td>
                    </tr>
                </table>
                <!--                    <div class="tit"></div>-->
                <fieldset class="layui-elem-field layui-field-title" style="font-weight: bold;">
                    <legend style="font-weight: bold;font-size: 16px;">订单信息</legend>
                </fieldset>
                <table style="width: 100%;line-height: 2;">
                    <tr>
                        <td>订单编号：{{detail_obj.order_no}}</td>
                        <td>负责人：{{detail_obj.order_head}}</td>
                        <td>收款金额：{{detail_obj.amount_collected}}</td>
                    </tr>
                    <tr>
                        <td>下单时间：{{detail_obj.create_time}}</td>
                        <td>订单状态：{{
                            detail_obj.status==1?'未下单':
                            detail_obj.status==2?'待审核':
                            detail_obj.status==3?'审核通过':
                            detail_obj.status==4?'审核驳回':
                            detail_obj.status==6?'出库完成':
                            detail_obj.status==10?'已打印':
                            detail_obj.status==8?'有售后':
                            detail_obj.status==9?'售后完成':''
                            }}
                        </td>

<!--                        <td >订单审核：{{detail_obj.change_auditor}}</td>-->
                        <td >订单驳回原因：{{detail_obj.reason}}</td>
                    </tr>
                    <tr>
                        <td>备注：{{detail_obj.remark}}</td>

                    </tr>
                    <tr v-if="detail_obj.completed_by">
                        <td v-if="detail_obj.completed_by">售后处理员：{{detail_obj.completed_by}}</td>
                        <td v-if="detail_obj.completed_time">处理时间：{{detail_obj.completed_time}}</td>
                    </tr>
                </table>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend style="font-weight: bold;font-size: 16px;">收款凭证</legend>
                </fieldset>
                <div style="display: flex;align-items: center;" v-if="detail_obj.collection_voucher">
                    <el-image v-for="item of detail_obj.collection_voucher"
                              style="width: 100px; height: 100px;margin: 10px 0;border: 1px solid #ccc;"
                              :src="item"
                              :preview-src-list="detail_obj.collection_voucher"
                              fit="contain">
                    </el-image>
                </div>
                <fieldset class="layui-elem-field layui-field-title" v-if="detail_obj.void_picture">
                    <legend style="font-weight: bold;font-size: 16px;">处理结果</legend>
                </fieldset>
                <div style="display: flex;align-items: center;" v-if="detail_obj.void_picture">
                    <el-image v-for="item of detail_obj.void_picture"
                              style="width: 100px; height: 100px;margin: 10px 0;border: 1px solid #ccc;"
                              :src="item"
                              :preview-src-list="detail_obj.void_picture"
                              fit="contain">
                    </el-image>
                </div>
                <div v-if="detail_obj.void_characters">处理说明：{{detail_obj.void_characters}}</div>
                <fieldset class="layui-elem-field layui-field-title" >
                    <legend style="font-weight: bold;font-size: 16px;">商品信息</legend>
                </fieldset>
                <el-table :data="detail_obj.order_item || []"
                          border>
                    <el-table-column label="商品" prop="good_name" width="200"></el-table-column>
                    <el-table-column label="数量" prop="num" width="110"></el-table-column>
                </el-table>
            </div>
        </div>

    </el-dialog>
</div>
<script !src="">
    new Vue({
        el: '#app',
        data: function() {
            return {
                form:{},
                dataArr:[],
                labelPosition:'left',
                bh:'',
                value2:'',
                data:{
                    page:1,
                    limit:10
                },
                type_:'all',
                total:0,
                currentPage:1,
                dialogVisible: false,
                active_int:1,
                detail_obj:{},
                dialogVisible_change:false,
                change_info_val:1,
                change_info_id:'',
                pickerOptions:'',
                edit_detail:{},
                search_form:{},
            }
        },
        created(){
            this.get_list()
        },
        methods:{
            search_get_list(){
                this.data = Object.assign({},this.data,this.search_form)
                this.type_ = 'all'
                this.get_list()
            },
            changeList(type){
                this.type_=type
                this.data={
                    page:1,
                    limit:10
                }
                this.get_list()
            },
            success(){
                $.ajax({
                    url:"/admin/ord.order/change_information",
                    data:{change_info:this.change_info_val,id:this.change_info_id},
                    type:'POST',
                    dataType: 'json',
                    success:(res)=>{
                        if(res.code==1){
                            var item = this.dataArr.find(d=>d.id==this.change_info_id)
                            item.change_info = this.change_info_val
                            this.$message({
                                type: 'success',
                                message: res.msg
                            });
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.msg
                            });
                        }
                    }
                })
                this.dialogVisible_change = false
            },
            change_info(id){
                this.dialogVisible_change = true
                this.change_info_id = id
            },
            detail_show(data){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                    directional:'8000'
                });
                $.ajax({
                    url:"/admin/rid.receipt_issue_details/receipt_issue_detailed_detail",
                    data:{id:data.id},
                    type:'GET',
                    dataType: 'json',
                    success:(res)=>{
                        loading.close()
                        if(res.code==1){
                            this.dialogVisible = true;

                            if(res.row && res.row.order){
                                this.detail_obj = res.row.order
                                this.detail_obj.order_head = res.row.order_head
                                this.detail_obj.discrepancy = res.row.discrepancy
                                this.detail_obj.receipt_issue_type = res.row.receipt_issue_type
                                this.active_int=2;
                                var detail_obj = this.detail_obj
                                $.ajax({
                                    url:'/admin/ord.order/get_preaive',
                                    dataType:"json",
                                    success:(res_p)=> {
                                        var province = res_p.data.find(item => {
                                            return item.id == detail_obj.provinces
                                        })
                                        $.ajax({
                                            url: '/admin/ord.order/city',
                                            data: {pid: detail_obj.provinces},
                                            dataType: "json",
                                            success: (res_c) => {
                                                var city = res_c.data.find(item => {
                                                    return item.id == detail_obj.city
                                                })
                                                $.ajax({
                                                    url: '/admin/ord.order/area',
                                                    data: {cid: detail_obj.city},
                                                    dataType: "json",
                                                    success: (res_a) => {
                                                        var area = res_a.data.find(item => {
                                                            return item.id == detail_obj.area
                                                        })
                                                        detail_obj.provinces = province.name
                                                        detail_obj.city = city.name
                                                        detail_obj.area = area?.name
                                                    }
                                                })
                                            }
                                        })
                                    } })
                            }else {
                                if(res.row.goods_warehousing_item){
                                    this.detail_obj = Object.assign({},res.row)
                                    this.detail_obj.goods_warehousing_item = res.row.goods_warehousing_item.goods_warehousing_item
                                    this.detail_obj.receipt_issue_type = res.row.receipt_issue_type
                                    var detail_obj = this.detail_obj
                                    $.ajax({
                                        url:'/admin/ord.order/get_preaive',
                                        dataType:"json",
                                        success:(res_p)=> {
                                            var province = res_p.data.find(item => {
                                                return item.id == detail_obj.provinces
                                            })
                                            $.ajax({
                                                url: '/admin/ord.order/city',
                                                data: {pid: detail_obj.provinces},
                                                dataType: "json",
                                                success: (res_c) => {
                                                    var city = res_c.data.find(item => {
                                                        return item.id == detail_obj.city
                                                    })
                                                    $.ajax({
                                                        url: '/admin/ord.order/area',
                                                        data: {cid: detail_obj.city},
                                                        dataType: "json",
                                                        success: (res_a) => {
                                                            var area = res_a.data.find(item => {
                                                                return item.id == detail_obj.area
                                                            })
                                                            detail_obj.provinces = province.name
                                                            detail_obj.city = city.name
                                                            detail_obj.area = area?.name
                                                        }
                                                    })
                                                }
                                            })
                                        } })
                                    this.active_int=1;
                                }else{
                                    this.detail_obj = res.row.checklist
                                    this.detail_obj.receipt_issue_type = res.row.receipt_issue_type
                                    this.active_int=1;
                                }

                            }
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.msg
                            });
                        }
                    },
                    error:()=>{
                        loading.close()
                        this.$message({
                            type: 'info',
                            message: '网络状态差'
                        });
                    }
                })
            },
            notes_show(data){
                this.$prompt('请输备注', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S+/,
                    inputErrorMessage: '备注不能为空'
                }).then(({ value }) => {
                    $.ajax({
                        url:'/admin/gwa.goods_warehousing/edit_remark',
                        data:{id:data.id,reamark:value},
                        dataType:"json",
                        success:(res)=>{
                            if(res.code==1){
                                this.$message({
                                    type: 'success',
                                    message:res.msg
                                });
                                var item = this.dataArr.find(d=>d.id==data.id)
                                item.reamark = value
                            }else{
                                this.$message({
                                    type: 'info',
                                    message: res.msg
                                });
                            }
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            createOrder(){
                window.location.href = '/admin/ord.order/add'
            },
            handleSizeChange(val){
                this.data.limit = val
                this.get_list()
            },
            handleCurrentChange(val) {
                this.data.page = val
                this.get_list()
            },
            get_list(){
                if(this.type_=='all'){
                    $.ajax({
                        url:'/admin/rid.ReceiptIssueDetails/index',
                        data:this.data,
                        dataType:"json",
                        success:(res)=>{
                            this.dataArr = res.data
                            this.total = res.count
                        }
                    })
                }else if(this.type_=='rouku'){
                    $.ajax({
                        url:'/admin/rid.ReceiptIssueDetails/warehousing_details',
                        data:this.data,
                        dataType:"json",
                        success:(res)=>{
                            this.dataArr = res.data
                            this.total = res.count
                        }
                    })
                }else if(this.type_=='chuku'){
                    $.ajax({
                        url:'/admin//rid.ReceiptIssueDetails/outbound_details',
                        data:this.data,
                        dataType:"json",
                        success:(res)=>{
                            this.dataArr = res.data
                            this.total = res.count
                        }
                    })
                }

            }
        },
        mounted() {

        }
    })
</script>
<style>
    .border{
        padding: 20px;
        border: 1px solid rgba(232, 232, 232, 1);
    }
</style>